<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>任务设置</title>
<link rel="stylesheet" href="/css/index.css" type="text/css">
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.SuperSlide.2.1.3.js"></script>
<script type="text/javascript" src="/js/layui.js"></script>
<link rel="stylesheet" href="/css/layui.css">
	<style>
		.submit_loading {
			position:fixed;
			width:100%;
			height:100%;
			top:0;
			left:0;
			background-color:#000;
			text-align:center;
			opacity:0.3;
		}
		.loading_show {
			margin-top:15%;
		}
		.loading_context {
			color: #fff;
		}
		.rwjl{
			background: #0d8ddb;
			color: #fff;
			width: 200px;
			height: 50px;
			font-size: 22px;
			display: block;
			margin:auto;
			outline: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
   <div class="topbanner"><img src="/img/banner.png" alt=""></div>
   <div class="main">
  		<h3 class="New_h3">统计结果</h3>
   		<div class="New_jieguo">
  			<div class="LeftUp">
  				<!--学部下拉框选择-->
  				<div class="xuebu">
					<label>学部：
						<select id="XB" name="sel1" onChange="XueBuChange(this.value)">
							<option value="0">=请选择=</option>
						</select>
					</label>
				</div>
				<!--年级下拉框选择-->
				<div class="xuebu">
					<label>年级：
						<select id="grade" name="sel1" onChange="GradeChange(this.value)">
							<option value="0">=请选择=</option>
						</select>
					</label>
				</div>
				<!--班级下拉框选择-->
				<div class="xuebu">
					<label>班级：
						<select id="clazz" name="sel1" onChange="ClazzChange(this.value)">
							<option value="0">=请选择=</option>
						</select>
					</label>
				</div>
  			</div>
  			<div class="LeftDown">
  				<h3 id="JG"></h3>
  				<ul>
  					<li><span id="JSL">0%</span>近视率</li>
  					<li><span>优秀</span>用眼行为评级</li>
  				</ul>
  			</div>
  		</div>
   </div>
   	<input  class="rwjl" type="button" value="任务记录" onclick="renwuhistory()">
   <div class="main renwuBox" style="background:#f9ae40;padding:8px;border-radius:10px;">
   		<div class="hd" id="New_hd">
   		</div>
   		<div class="bd" id="New_bd">
			<form id="signupForm">
   			<div class="txt">
				<p>任务时间：<span id="span1"></span></p>
				<p>平均评级：<span id="span2"></span></p>
   				<dl>
   					<dt>任务详情：</dt>
   					<dd>

						<ul>
							<li><em>时长：</em>
								<select name="taskTime" onchange="setTaskTime(this.value)">
									<option value="0">=请选择=</option>
									<option value="1">1天</option>
									<option value="7">7天</option>
									<option value="15">15天</option>
									<option value="30">30天</option>
								</select>
							</li>
							<li><em>健康用眼评级：</em>
								<select name="eyeRate" onchange="setEyeRate(this.value)">
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均单次阅读时长：</em>
								<select name="avgRead">
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均户外时长：</em>
								<select name="avgOut" >
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均阅读距离：</em>
								<select name="avgReadDistance">
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均阅读光照：</em>
								<select name="avgLight">
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均单次看手机时长：</em>
								<select name="avgLookPhone">
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均单次看电脑电视时长：</em>
								<select name="avgLookTv">
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>平均坐姿倾斜度：</em>
								<select name="avgSitTilt" >
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
							<li><em>有效使用监护仪总时长：</em>
								<select name="effectiveUseTime" >
									<option value="0">=请选择=</option>
									<option value="5">优秀</option>
									<option value="4">良好</option>
									<option value="2">差</option>
									<option value="1">极差</option>
								</select>
							</li>
						</ul>

  					</dd>
   				</dl>
   				<input type="button" value="执行任务" onclick="save()">
   			</div>
			</form>
   		</div>
   </div>


   <div id="loading" class="submit_loading" style="display: none">
	   <div class="loading_show">
		   <img src="/images/loading.gif">
		   <p class="loading_context">正在提交，请稍候。。。</p>
	   </div>
   </div>

</body>
</html>
<script type="text/javascript" th:inline="javascript">
   var url = 'http://121.36.8.243:8083'
//   var url = 'http://localhost:8083'
	var school = [[${school}]];
	var checkType = [[${checkType}]];
	var CityName = [[${CityName}]];
	var AreaName = [[${AreaName}]];
	localStorage.clear();

	var XueBu='';
	var Grade='';
	var Clazz='';
	var idCards=[];
   {
       $.ajax({
           cache: true,
           type: "GET",
           async: false,
           url: '/Newhuyan/XueBu?school=' + school + '&CityName=' + CityName + '&AreaName=' + AreaName + '&checkType=' + checkType,
           error: function (request) {
               parent.layer.alert("网络超时");
           },
           success: function (data) {
               var html = `<option>=请选择=</option>`;
               for (let i = 0; i < data.length; i++) {
                   html += `<option value=` + data[i] + `>` + data[i] + `</option>`
               }

               $("#XB").html(html)
           }
       });
   }
	var XueBuChange = function (xuebu){
		if ('=请选择='==xuebu){
			$("#grade").html(`<option>=请选择=</option>`);
			$("#clazz").html(`<option>=请选择=</option>`);
			$("#JSL").text(`0%`);
			$("#JG").text(``);
			XueBu='';
			Grade='';
			Clazz='';
		}
		if ('=请选择='!=xuebu){
			XueBu=xuebu;
			$.ajax({
				cache: true,
				type: "GET",
				async: false,
				url: '/Newhuyan/Grade?school='+school+'&CityName='+CityName+'&AreaName='+AreaName+'&checkType='+checkType+'&xuebu='+xuebu,
				error: function (request) {
					parent.layer.alert("网络超时");
				},
				success: function (data) {
					var html=`<option>=请选择=</option>`;
					for (let i = 0; i < data.length; i++) {
						html+=`<option value=`+data[i]+`>`+data[i]+`</option>`
					}
					$("#grade").html(html)
				}
			})
		}
	}


	var GradeChange = function (grade){
		if ('=请选择='==grade){
			$("#clazz").html(`<option>=请选择=</option>`);
			$("#JSL").text(`0%`);
			$("#JG").text(``);

			Grade='';
			Clazz='';
		}
		if ('=请选择='!=grade){
			Grade=grade;
			$.ajax({
				cache: true,
				type: "GET",
				async: false,
				url: '/Newhuyan/Clazz?school='+school+'&CityName='+CityName+'&AreaName='+AreaName+'&checkType='+checkType+'&xuebu='+XueBu+'&grade='+grade,
				error: function (request) {
					parent.layer.alert("网络超时");
				},
				success: function (data) {
					var html=`<option>=请选择=</option>`;
					for (let i = 0; i < data.length; i++) {
						html+=`<option value=`+data[i]+`>`+data[i]+`</option>`
					}
					$("#clazz").html(html)
				}
			})
		}
	}


	var ClazzChange = function (clazz){
		if ('=请选择='==clazz){
			$("#JG").html(``);
			$("#JSL").text(`0%`);
			$("#JG").text(``);
			Clazz='';
		}
		if ('=请选择='!=clazz){
			$("#JG").text($("#XB").val()+$("#grade").val()+$("#clazz").val()+'统计结果');
			Clazz=clazz;
			$.ajax({
				cache: true,
				type: "GET",
				async: false,
				url: '/Newhuyan/ClazzJSL?school='+school+'&CityName='+CityName+'&AreaName='+AreaName+'&checkType='+checkType+'&xuebu='+XueBu+'&grade='+Grade+'&clazz='+clazz,
				error: function (request) {
					parent.layer.alert("网络超时");
				},
				success: function (data) {
					$("#JSL").text(data+'%')
					getClazzIdCards();
				}
			})
		}
	}

	var getClazzIdCards = function (){
			$("#JG").text($("#XB").val()+$("#grade").val()+$("#clazz").val()+'统计结果');
			$.ajax({
				cache: true,
				type: "GET",
				async: false,
				url: '/Newhuyan/GetClazzIdCards?school='+school+'&CityName='+CityName+'&AreaName='+AreaName+'&checkType='+checkType+'&xuebu='+XueBu+'&grade='+Grade+'&clazz='+Clazz,
				error: function (request) {
					parent.layer.alert("网络超时");
				},
				success: function (data) {
				    console.info("===================");
				    console.info(data);
				    console.info(JSON.stringify(data));
                    console.info("===================");

                    idCards=data;
				}
			})
	}

//	var initTask = function () {
//	   $.ajax({
//		  type:'get',
//		  url:url+'/api/gift/listPc',
//          async : false,
//          dataType : "jsonp",
//          jsonp:"callback",
//          success : function(data) {
//             console.log(data.data,"data")
//			 result = data.data
//			 var html = ''
//			 html+='<ul>'
//			 for(var i= 0;i<result.length;i++){
//			    html+='<li><input type="hidden" value="'+result[i].id+'"><img src="'+result[i].coverImg+'" alt=""/><p>'+result[i].giftName+'</p></li>'
//			 }
//			 html+='</ul>'
//			 $('#New_hd').html(html)
//          },
//          error : function() {
//             alert('fail');
//          }
//	   })
//    }


	$(function () {
//       initTask();
       setInterval("loadslide()", 1000);
    })
	function loadslide(){
       jQuery(".renwuBox").slide({trigger:"click"});
	}

	function setTaskTime(value) {
	   if(value!=null && value>0){
			if(value == 1){
			   $('#span1').text("1天")
			}else if(value == 7){
			   $('#span1').text("7天")
			}else if(value == 15){
			   $('#span1').text("15天")
			}else if(value == 30){
			   $('#span1').text("30天")
			}
	   }
    }

    function setEyeRate(value) {
       if(value!=null && value>0){
          if(value == 5){
             $('#span2').text("优秀")
          }else if(value == 4){
             $('#span2').text("良好")
          }else if(value == 2){
             $('#span2').text("差")
          }else if(value == 1){
             $('#span2').text("极差")
          }
       }
    }

    function save() {
	   if(idCards.length ==0){
          alert("请选择任务班级");
	      return;
	   }
	   if($("select[name='taskTime']").val() <=0){
          alert("请选择任务时长");
          return;
	   }
       if($("select[name='eyeRate']").val() <=0){
          alert("请选择用眼评级");
          return;
       }
       if($("select[name='avgRead']").val() <=0 ){
          alert("请选择平均单次阅读时长");
          return;
       }
       if($("select[name='avgReadDistance']").val() <=0 ){
          alert("请选择平均阅读距离");
          return;
       }
        if($("select[name='avgOut']").val() <=0 ){
            alert("请选择平均户外时长");
            return;
        }
       if($("select[name='avgLight']").val() <=0 ){
          alert("请选择平均阅读光照");
          return;
       }
       if($("select[name='avgLookPhone']").val() <=0 ){
          alert("请选择平均单次看手机时长");
          return;
       }
       if($("select[name='avgLookTv']").val() <=0 ){
          alert("请选择平均单次看电脑电视时长");
          return;
       }
       if($("select[name='avgSitTilt']").val() <=0 ){
          alert("请选择平均坐姿倾斜度");
          return;
       }
       if($("select[name='effectiveUseTime']").val() <=0 ){
          alert("请选择有效使用监护仪总时长");
          return;
       }

        let taskTime = $("select[name='taskTime']").val();
        let eyeRate = $("select[name='eyeRate']").val();
        let avgRead = $("select[name='avgRead']").val();
        let avgReadDistance = $("select[name='avgReadDistance']").val();
        let avgLight = $("select[name='avgLight']").val();
        let avgLookPhone = $("select[name='avgLookPhone']").val();
        let avgLookTv = $("select[name='avgLookTv']").val();
        let avgSitTilt = $("select[name='avgSitTilt']").val();
        let effectiveUseTime = $("select[name='effectiveUseTime']").val();
        let avgOut = $("select[name='avgOut']").val();
        let pcorapp=school+XueBu+Grade+Clazz;
		let userTaskDO = {taskTime,eyeRate,avgRead,avgReadDistance,avgLight,avgLookPhone,avgLookTv,avgSitTilt,effectiveUseTime,avgOut,pcorapp}
		let idCardsInfo=JSON.stringify(idCards);
		$("#loading").show();
       $.ajax({
          cache: true,
          type: "post",
          url: url+"/api/gift/customTaskPc",
          data: {...userTaskDO,idCardsInfo},
          async: false,
          success: function (data) {console.info(data)
            if(data.code==0){
                alert(data.msg);
				$("#signupForm select").val("0");
                $("#span1").text('');
                $("#span2").text('');
                $("#loading").hide();
			}
          },
		  error: function (request) {
          	alert("Connection error");
              $("#loading").hide();
		  },
       });

    }

  /**
   *  任务记录
   */
  function renwuhistory(){
	let XB = $("#XB").val();
	let grade=$("#grade").val();
	let clazz=$("#clazz").val();
	if(XB=="=请选择=" || XB==null){
	    alert("学部不可为空"); return ;
	}
      if(grade=="=请选择=" || grade==null){
	    alert("年级不可为空"); return;
	}
	if(clazz=="=请选择=" || clazz==null){
	    alert("班级不可为空"); return ;
	}



        let pcorapp=school+XB+grade+clazz;
    	window.location.href="/Newhuyan/getRenWuHistory?pcorapp="+pcorapp+"&school="+school+"&checkType="+checkType
		+"&CityName="+CityName+"&AreaName="+AreaName;
    	localStorage.setItem("pcorapp",pcorapp);
      	localStorage.setItem("school",school);
      	localStorage.setItem("checkType",checkType);
      	localStorage.setItem("CityName",CityName);
      	localStorage.setItem("AreaName",AreaName);
  }
</script>


